<template>
	<div class="body">
		<el-row :gutter="20">
		  <el-col :span="6">
			  <div class="block">
				  <img src="@/assets/img/computer.png" class="pic"/>
				  <div class="num">{{ top.totalCount }}</div>
				  <div class="title">设备总数</div>
			  </div>
		  </el-col>
		  <el-col :span="6">
			  <div class="block" style="background-color: #C4B5B5;">
				  <img src="@/assets/img/leave.png" class="pic"/>
				  <div class="num">{{ top.unconectedCount }}</div>
				  <div class="title">断开连接设备总数</div>
			  </div>
		  </el-col>
		  <el-col :span="6">
			  <div class="block" style="background-color: #F5B01C;">
				  <img src="@/assets/img/warn.png" class="pic"/>
				  <div class="num">{{ top.faultCount }}</div>
				  <div class="title">故障设备数</div>
			  </div>
		  </el-col>
		  <el-col :span="6">
			  <div class="block" style="background-color: #EE9696;">
				  <img src="@/assets/img/alarm.png" class="pic"/>
				  <div class="num">{{ top.alarmCount }}</div>
				  <div class="title">发生报警设备总数</div>
			  </div>
		  </el-col>
		</el-row>
		<div style="width: 100%;height: 20px;"></div>
		<el-row :gutter="20">
		  <el-col :span="12">
			  <div class="chart">
				  <div class="title">访客日人流量统计</div>
				  <div class="button">近30天</div>
				  <div class="chart-container" id="chart-container"></div>
			  </div>
		  </el-col>
		  <el-col :span="12">
			  <div class="chart">
				  <div class="title">员工日人流量统计</div>
				  <div class="button">近30天</div>
				  <div class="chart-container" id="chart-container2"></div>
			  </div>
		  </el-col>
		</el-row>
		<div style="width: 100%;height: 20px;"></div>
		<el-row :gutter="20">
		  <el-col :span="12">
			  <div class="chart">
				  <div class="title">时人流量统计</div>
				  <div class="button">近24小时</div>
				  <div class="chart-container" id="chart-container3"></div>
			  </div>
		  </el-col>
		  <el-col :span="12">
			  <div class="chart">
				  <div class="title">时访客人数统计</div>
				  <div class="button">近24小时</div>
				  <div class="chart-container" id="chart-container4"></div>
			  </div>
		  </el-col>
		</el-row>
	</div>
</template>

<script>
	import { queryAccessDevicesCount,queryAccessRecordsCount } from '@/api/sendhttp/son'
	export default{
		data(){
			return {
				top:{
					'totalCount':'',
					'unconectedCount':'',
					'faultCount':'',
					'alarmCount':''
				},
				line1:[],
				line11:[],
				line2:[],
				line22:[],
				line3:[],
				line33:[],
				line4:[],
				line44:[],
			}
		},
		mounted() {
			this.line('visitorDay',1)
			this.line('visitorTime',4)
			this.line('allPerson',3)
			this.line('normalDay',2)
			this.topBar('totalCount')
			this.topBar('unconectedCount')
			this.topBar('faultCount')
			this.topBar('alarmCount')
		},
		methods: {
			topBar(type){
				queryAccessDevicesCount(type).then(res => {
					for(let key in this.top){
						if(type==key){
							this.top[key] = res.data.data.count
						}
					}
				})
			},
			line(type,flag){
				queryAccessRecordsCount(type).then(res => {
					if(flag==1){
						this.line1 = res.data.data.map(item => {
							return item.countTime
						})
						this.line11 = res.data.data.map(item => {
							return item.countNum
						})
						this.linechart()
					}else if(flag==2){
						this.line2 = res.data.data.map(item => {
							return item.countTime
						})
						this.line22 = res.data.data.map(item => {
							return item.countNum
						})
						this.linechart2()
					}else if(flag==3){
						this.line3 = res.data.data.map(item => {
							return item.countTime
						})
						this.line33 = res.data.data.map(item => {
							return item.countNum
						})
						this.linechart3()
					}else if(flag==4){
						this.line4 = res.data.data.map(item => {
							return item.countTime
						})
						this.line44 = res.data.data.map(item => {
							return item.countNum
						})
						this.linechart4()
					}
				})
			},
			linechart() {
				var dom = document.getElementById('chart-container');
				var myChart = this.$echarts.init(dom, null, {
				  renderer: 'canvas',
				  useDirtyRect: false
				});
				var app = {};
				
				var option;
				
				option = {
				  xAxis: {
				    type: 'category',
					axisLabel: {
						show: true,
						rotate:40,
					},
				    data: this.line1
				  },
				  yAxis: {
				    type: 'value',
				  },
				  series: [
				    {
				      data: this.line11,
				      type: 'line',
				      smooth: true,
					  lineStyle: {
						  color: '#EE9696'
					  },
					  itemStyle: {
					  	  color: '#EE9696'
					  },
					  label: {
						  show: true,
						  position: 'top',
						  color: '#EE9696'
					  }
				    }
				  ]
				};
				
				if (option && typeof option === 'object') {
				  myChart.setOption(option);
				}
				
				window.addEventListener('resize', myChart.resize);
			},
			
			linechart2() {
				var dom = document.getElementById('chart-container2');
				var myChart = this.$echarts.init(dom, null, {
				  renderer: 'canvas',
				  useDirtyRect: false
				});
				var app = {};
				
				var option;
				
				option = {
				  xAxis: {
				    type: 'category',
					axisLabel: {
						show: true,
						rotate:40,
					},
				    data: this.line2
				  },
				  yAxis: {
				    type: 'value',
				  },
				  series: [
				    {
				      data: this.line22,
				      type: 'line',
				      smooth: true,
					  lineStyle: {
						  color: '#EE9696'
					  },
					  itemStyle: {
					  	  color: '#EE9696'
					  },
					  label: {
						  show: true,
						  position: 'top',
						  color: '#EE9696'
					  }
				    }
				  ]
				};
				
				if (option && typeof option === 'object') {
				  myChart.setOption(option);
				}
				
				window.addEventListener('resize', myChart.resize);
			},
			
			linechart3() {
				var dom = document.getElementById('chart-container3');
				var myChart = this.$echarts.init(dom, null, {
				  renderer: 'canvas',
				  useDirtyRect: false
				});
				var app = {};
				
				var option;
				
				option = {
				  xAxis: {
				    type: 'category',
					axisLabel: {
						show: true,
						rotate:40,
					},
				    data: this.line3
				  },
				  yAxis: {
				    type: 'value',
				  },
				  series: [
				    {
				      data: this.line33,
				      type: 'line',
				      smooth: true,
					  lineStyle: {
						  color: '#EE9696'
					  },
					  itemStyle: {
					  	  color: '#EE9696'
					  },
					  label: {
						  show: true,
						  position: 'top',
						  color: '#EE9696'
					  }
				    }
				  ]
				};
				
				if (option && typeof option === 'object') {
				  myChart.setOption(option);
				}
				
				window.addEventListener('resize', myChart.resize);
			},
			
			linechart4() {
				var dom = document.getElementById('chart-container4');
				var myChart = this.$echarts.init(dom, null, {
				  renderer: 'canvas',
				  useDirtyRect: false
				});
				var app = {};
				
				var option;
				
				option = {
				  xAxis: {
				    type: 'category',
					axisLabel: {
						show: true,
						rotate:40,
					},
				    data: this.line4
				  },
				  yAxis: {
				    type: 'value',
				  },
				  series: [
				    {
				      data: this.line44,
				      type: 'line',
				      smooth: true,
					  lineStyle: {
						  color: '#EE9696'
					  },
					  itemStyle: {
					  	  color: '#EE9696'
					  },
					  label: {
						  show: true,
						  position: 'top',
						  color: '#EE9696'
					  }
				    }
				  ]
				};
				
				if (option && typeof option === 'object') {
				  myChart.setOption(option);
				}
				
				window.addEventListener('resize', myChart.resize);
			}
		}
	}
</script>

<style scoped lang="scss">
.chart-container {
  position: absolute;
  bottom: 15px;
  width: 100%;
  height: 364px;
  overflow: hidden;
  margin: auto;
}
.body {
	padding: 20px;
}
.block {
	width: 100%;
	height: 80px;
	line-height: 20px;
	border-radius: 8px;
	background-color: #56A3EE;
	text-align: center;
	position: relative;
}
.pic {
	position: absolute;
	top: 20px;
	left: 3%;
}
.num {
	position: absolute;
	right: 3%;
	top: 20px;
	color: rgba(255, 254, 232, 1);
	font-size: 28px;
	text-align: left;
	font-family: SourceHanSansSC-regular;
}
.title {
	position: absolute;
	right: 3%;
	top: 45px;
	color: rgba(255, 254, 232, 1);
	font-size: 14px;
	text-align: left;
	font-family: SourceHanSansSC-regular;
}
.chart {
	position: relative;
	margin: auto;
	width: 100%;
	height: 456px;
	border-radius: 8px;
	background-color: rgba(241, 243, 245, 1);
	border: 1px solid rgba(213, 213, 211, 1);
	.title {
		position: absolute;
		top: 20px;
		left: 20px;
		width: 128px;
		height: 24px;
		color: rgba(16, 16, 16, 1);
		font-size: 16px;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}
	.button {
		position: absolute;
		right: 20px;
		top: 20px;
		width: 81px;
		height: 25px;
		line-height: 25px;
		border-radius: 3px;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: center;
		font-family: Roboto;
		border: 1px solid rgba(187, 187, 187, 1);
	}
}
	
</style>